<template>
   <div class="app-container">
   
   
     <!--查询表单-->
   <div class="search-div">
         <el-form label-width="70px" size="small">
           <el-row>
            <!-- 条件查询 -->
             <el-col :span="8">
               <el-form-item label="项目名称">
                 <el-input style="width: 100%" v-model="searchObj.name" placeholder="请输入" clearable></el-input>
               </el-form-item>
            </el-col>
           
            <!-- 项目类型选择 -->
             <el-col :span="8" >
                <el-form-item label="选择项目类型" label-width="100px">
                    <template>
                <el-select v-model="searchObj.type" placeholder="请选择" style="width: 100%;">
                    <el-option
                    v-for="item in typeOptions"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id">
                    </el-option>
                </el-select>
                </template>
               </el-form-item>
             </el-col>

              <!-- 项目类型选择 -->
              <el-col :span="8" >
                <el-form-item label="选择小区" label-width="70px">
                    <template>
                <el-select v-model="searchObj.community_id" placeholder="请选择" filterable style="width: 100%;">
                    <el-option
                    v-for="item in communityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                </template>
               </el-form-item>
             </el-col>

           </el-row>
           <el-row style="display:flex">
             <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
             
           </el-row>
         </el-form>
       </div>
   
           <!-- 工具条 -->
   <div class="tools-div">
     <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
   </div>
   
       <!-- 表格 -->
       <el-table
         v-loading="listLoading"
         :data="list"
         stripe
         border
         style="width: 100%;margin-top: 10px;">
   
         <el-table-column
           label="序号"
           width="70"
           align="center">
           <template slot-scope="scope">
             {{ (page - 1) * limit + scope.$index + 1 }}
           </template>
         </el-table-column>
   
         <el-table-column prop="param.community_name" label="小区名称" />
         <el-table-column prop="code" label="收费编号" />
         <el-table-column prop="name" label="项目名称" />
         <el-table-column prop="type" label="收费类型" >
          <template slot-scope="scope">
            <el-popover
            placement="right-end"
            :close-delay="0"
            :open-delay="0"
            width="200"
            trigger="hover">
            <p v-if="scope.row.type==0">如:水电费、物业费等</p>
            <p v-if="scope.row.type==1">如:临时停车等</p>
            <p v-if="scope.row.type==2">条件符合,可退还</p>
            <p v-if="scope.row.type==3">缴纳费用可自动扣除</p>
            <!-- <el-button slot="reference">删除</el-button> -->
            <el-tag type="primary" slot="reference" v-if="scope.row.type==0">常规收费</el-tag>
            <el-tag type="danger" slot="reference" v-if="scope.row.type==1">临时收费</el-tag>
            <el-tag type="warning" slot="reference" v-if="scope.row.type==2">押金收费</el-tag>
            <el-tag type="success" slot="reference" v-if="scope.row.type==3">预缴纳</el-tag>
          </el-popover>
           </template>
         
            </el-table-column>
         <el-table-column prop="money" label="收费金额" />
        
   
         <el-table-column prop="createTime" label="创建时间" width="160"/>
         <el-table-column label="操作" width="200" align="center">
           <template slot-scope="scope">
             <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
             <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeItemById(scope.row.id)" title="删除"/>
           </template>
         </el-table-column>
       </el-table>

       <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
         <el-form ref="dataForm" :model="chargeItem" label-width="150px" size="small" style="padding-right: 40px;">
           
           <!-- 所属小区  选择 -->
           <el-form-item label="所属小区">
          <template>
          <el-select v-model="chargeItem.communityId" placeholder="未选择" filterable>
            <el-option
              v-for="item in communityList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
        </el-form-item>
          <!-- 收费类型 -->

           <el-form-item label="收费类型" >
          <el-radio-group v-model="chargeItem.type" size="medium" >
            <el-radio-button :label="0" >常规收费</el-radio-button>
            <el-radio-button :label="1" >临时收费</el-radio-button>
            <el-radio-button :label="2" >押金收费</el-radio-button>
            <el-radio-button :label="3" >预缴纳</el-radio-button>
          </el-radio-group>

          

           </el-form-item>
           <el-form-item label="收费编号" v-if="chargeItem.id">
             <el-input v-model="chargeItem.code" disabled/>
           </el-form-item>
           <el-form-item label="项目名称" >
             <el-input v-model="chargeItem.name" />
           </el-form-item>
           <el-form-item label="金额">
             <el-input v-model="chargeItem.money"/>
           </el-form-item>
          
           <!-- 类别选择 -- 单选框 -->
           <!-- 备注 -->
         </el-form>
         <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
           <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
         </span>
   </el-dialog>
   


              <!-- 分页组件 -->
     <el-pagination
       :current-page="page"
       :total="total"
       :page-size="limit"
       style="padding: 30px 0; text-align: center;"
       layout="total, prev, pager, next, jumper"
       @current-change="fetchData"
     />

       </div>
</template>

<script>
   import comApi from '@/api/sysCommunity/community'
  import itemApi from '@/api/sysCharge/item'
export default {
    data(){
      return {
            //搜索选择 --项目类型
            typeOptions:[
                {
                    id:0,
                    value:'常规收费'
                },
                {
                    id:1,
                    value:'临时收费'
                },
                {
                    id:2,
                    value:'押金收费'
                },
                {
                    id:3,
                    value:'预缴纳'
                },
            ],
             //小区列表
          communityList:[],

          listLoading:true,
          list:[],
          total:0,
          page:1,
          limit:3,
          searchObj:{},
          liveTime:'',
          chargeItem:{},
          dialogVisible : false,

       
      }
    },

    created(){
      this.fetchData();
      this.fetchCommunityList()
    },
    methods:{
      //查询所有小区 放入选择框
      fetchCommunityList(){
          comApi.finAllCommunity().then(res=>{
            this.communityList = res.data
            // console.log(res.data)
          })
      },
      //查询项目列表
      fetchData(page=1){
        this.listLoading=true;
        this.page = page;
        itemApi.getPageList(this.page,this.limit,this.searchObj).then(res=>{
           console.log(res)
          this.list = res.data.records
          this.total = res.data.total
          //关闭加载图标
          this.listLoading = false;
        })
      },
      //重置按钮
      resetData(){
        this.searchObj={}
        this.fetchData();
      },
      //添加按钮
      add(){
        this.chargeItem={}
        this.openDialog();
      },
      edit(id){
        itemApi.getItemById(id).then(res=>{
          // console.log(res);
          this.chargeItem = res.data;
          //打开弹框
          this.openDialog();
        })
      },
      //
      saveOrUpdate(){
          if(this.chargeItem.id){
            //修改
            this.updateItem(); 
          }else{
            this.addItem();
          }
      },
      //修改收费项目
      updateItem(){
        itemApi.updateItemById(this.chargeItem).then(res=>{
         //给出提示 成功则刷新列表
         this.tips(res.code==200,'修改收费项目')
        
        //关闭弹框
        this.dialogVisible = false;
        })
      },
      //添加收费项目
      addItem(){
        itemApi.addItem(this.chargeItem).then(res=>{
          //给出提示
          this.tips(res.code==200,'添加收费项目')
        
        //关闭弹框
        this.dialogVisible = false;
        })
      },
      //删除项目
      removeItemById(id){
        this.$confirm('确定删除该收费项吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 点击确定
          itemApi.removeItemById(id).then(res=>{
              // 1.给出提示
              this.tips(res.code==200,'删除收费项')
              
          })
        })
        },

      //提示
      tips(flag,msg){
        if(flag){
          //给出提示
          this.$notify({
            message: msg+'成功',
            type: 'success'
          });
          this.listLoading = true;
          //2. 再次刷新数据列表
          this.fetchData()
        }else{
          //给出提示
          this.$notify({
            message: msg+'失败',
            type: 'danger'
          });
        }
        
      },
      openDialog(){
        this.fetchCommunityList()
        //获取编码
        // this.getItemCode()
        this.dialogVisible = true;
      },
    }
}
</script>

<style>

</style>